<template>
	<view class="tabbar-warp">
		<view class="tabbar">
			<view :class="['tabbar-item', { active: current == 0 }]" @click="toPage('/pages/index/index', 'switchTab')">
				<image class="image" v-if="current != 0" src="/static/image/tabbar/tabbar-1.png"></image>
				<image class="image" v-else src="/static/image/tabbar/tabbar-1-active.png"></image>
				首页
			</view>
			<view :class="['tabbar-item', { active: current == 1 }]" @click="toPage('/pages/learn/index', 'switchTab')">
				<image class="image" v-if="current != 1" src="/static/image/tabbar/tabbar-2.png"></image>
				<image class="image" v-else src="/static/image/tabbar/tabbar-2-active.png"></image>
				学习
			</view>
			<!-- 为 AI 助学板块添加特殊的 blue-glow 类 -->
			<view :class="['tabbar-item', { active: current == 4, 'blue-glow': current == 4 }]" @click="toPage('/pages/AI/index', 'switchTab')">
				<image class="image" v-if="current != 4" src="/static/image/tabbar/tabbar-5.png"></image>
				<image class="image" v-else src="/static/image/tabbar/tabbar-5-active.png"></image>
				AI助学
			</view>
			<view :class="['tabbar-item', { active: current == 2 }]" @click="toPage('/pages/exam/index', 'switchTab')">
				<image class="image" v-if="current != 2" src="/static/image/tabbar/tabbar-3.png"></image>
				<image class="image" v-else src="/static/image/tabbar/tabbar-3-active.png"></image>
				考试
			</view>
			<view :class="['tabbar-item', { active: current == 3 }]" @click="toPage('/pages/mine/index', 'switchTab')">
				<image class="image" v-if="current != 3" src="/static/image/tabbar/tabbar-4.png"></image>
				<image class="image" v-else src="/static/image/tabbar/tabbar-4-active.png"></image>
				我的
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "v-tabbar",
	props: {
		current: {
			default: 0,
			type: [Number, String],
		},
	},
	data() {
		return {}
	},
	methods: {},
	components: {},
}
</script>

<style lang="scss" scoped>
$height: 130rpx;
$primary: #0078d4; // 蓝色主题色
$ai-text-color: #0061a3; // 更深的蓝色用于AI助学文字

.tabbar-warp {
	height: $height;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	flex: none;
	box-sizing: content-box;
}
view,
scroll-view,
swiper-item,
div {
	display: block;
	flex-direction: initial;
	flex-shrink: initial;
	flex-grow: initial;
	flex-basis: initial;
	align-items: initial;
	align-content: initial;
}
.tabbar {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 750px;
	margin: auto;
	background: #fff;
	color: #a1a1a1;
	text-align: center;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: 24rpx;
	box-shadow: 0 0 15rpx 0 rgba(#000, 0.05);
	box-sizing: content-box;
	height: $height;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);

	.tabbar-item {
		text-align: center;
		width: 100%;
		.image {
			width: 40rpx;
			height: 40rpx;
			margin: auto;
			margin-bottom: 10rpx;
			display: block;
		}
		&.active {
			color: $primary;
		}
		
		/* 为 AI 助学添加蓝色光圈效果 */
		&.blue-glow {
			position: relative;
			color: $ai-text-color; // 修改AI助学的字体颜色为更深的蓝色
			font-weight: bold; // 可选：增加字体粗细以增强视觉效果
			
			&::before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 160rpx; // 将光圈宽度从120rpx增加到160rpx
				height: 160rpx; // 将光圈高度从120rpx增加到160rpx
				border-radius: 50%;
				background: radial-gradient(circle, $primary 0%, transparent 70%);
				opacity: 0.6; // 略微增加透明度以增强可见性
				z-index: -1;
				animation: glow 2s infinite ease-in-out;
			}
		}
	}
}

/* 添加动画效果 */
@keyframes glow {
	0%, 100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.6;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.2); // 增加缩放比例
		opacity: 0.8;
	}
}
</style>
